<?php
require_once('profiles/LoginSystem.class.php');
session_start();

require ('controller/Login.controller.php');

$teclado = Login::crearTeclado();
$_SESSION['teclado'] = $teclado;

$ids = Login::obtenerId($teclado);

$numbers = array_slice($ids,0,10);
Login::kshuffle($numbers);
Login::mySort($numbers);

$upper = array_slice($ids,10,26);

$lower = array_slice($ids,36,26);	
	
	if(isset($_POST['submit']))
	{
		if((!$_POST['tbUserName']) )
		{
			// display error message
			header('location: http://localhost/fiei-seguridad/login.php?msg=1');// show error
			exit;
		}
		$loginSystem = new LoginSystem();
		//echo $_SESSION[Password];
		//echo $loginSystem -> doLogin ( $_POST['tbUserName'], $_SESSION[Password] );
		//die();
		if( $loginSystem -> doLogin ( $_POST['tbUserName'], $_SESSION[Password] ) )
		{
			/**
			 * Redirige a la pagina segura
			 */
			
			switch ($_SESSION['perfil']) {
				case 1:
					header('location: http://localhost/fiei-seguridad/profiles/perfil1.php');
					break;
				case 2:
					header('location: http://localhost/fiei-seguridad/profiles/perfil2.php');
					break;
				case 3:
					header('location: http://localhost/fiei-seguridad/profiles/perfil3.php');
					break;
                default:
                    header('location: http://localhost/fiei-seguridad/profiles/perfil1.php');
                    //header('location: http://localhost/fiei-seguridad/login.php?msg=4');
					break;
			}

		}
		else
		{
            //header('location: http://localhost/fiei-seguridad/profiles/perfil1.php');
			header('location: http://localhost/fiei-seguridad/login.php?msg=2');
			exit;
		}
	}else{
		$_SESSION[Password] = '';
	}
	
	/**
	 * show Error messages
	 *
	 */
	function showMessage()
	{
		if (isset($_GET['msg'])){
			if(is_numeric($_GET['msg']))
			{
				switch($_GET['msg'])
				{
					case 1:
						echo "Por favor llenar ambos campos.";
						break;				
					case 2:
						echo "Usuario o Contrase&ntilde;a incorrecta.";
						break;				
					case 3:
						echo "Error al iniciar Sesi&oacute;n.";
						break;
                    case 4:
                        echo "Perfil de usuario desconocido.";
                        break;
					default:
						echo "Oops! Error de par&aacute;metro desconocido.";
						break;
				}
			}
		}
	}
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Iniciar Sesion</title>
        <link rel="stylesheet" type="text/css" href="css/keyboard.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
<div id="wrap">

<div id="header">		
		
		<div id="logo-box">		
			<h1 id="logo"><a href="login.php" title="">Login</a></h1>	
			<h2 id="slogan">Su seguridad sobre todo...</h2>		
		</div>				
				
		<div class="headerphoto"></div>
</div>
	
	<div id="menu">
		<ul>
			<li><a href="login.php" id="current">Inicio</a></li>
			<li><a href="manage.php">Administrar</a></li>
			<li><a href="about.php">Acerca de...</a></li>			
		</ul>	
	</div>
    
<div id="content-wrap"><div id="content">		
    <div id="main">
    <h3>Inicio de Sesion</h3>   
    <form id="login" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <center>
        <p><label>Usuario : <input id="tbUserName" name="tbUserName" type="text" /></label></p>
        <p>
        <span><label>Password : <img id="txtPassword" src="password.php" width="300" height="30" vspace="3"></label></span>
        </p>
        </center>
        <br />
        <br />

        <?php
$tipoTeclado = Login::tipoTeclado();

switch ($tipoTeclado){    
    case 'QWERTY':

?>
        <!--<textarea id="write" rows="6" cols="60"></textarea>!-->
        <p>
        <ul id="keyboard">
                <li id="<?php echo $numbers[1]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[1] ?>" /></li>
                <li id="<?php echo $numbers[2]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[2] ?>" /></li>
                <li id="<?php echo $numbers[3]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[3] ?>" /></li>
                <li id="<?php echo $numbers[4]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[4] ?>" /></li>
                <li id="<?php echo $numbers[5]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[5] ?>" /></li>
                <li id="<?php echo $numbers[6]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[6] ?>" /></li>
                <li id="<?php echo $numbers[7]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[7] ?>" /></li>
                <li id="<?php echo $numbers[8]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[8] ?>" /></li>
                <li id="<?php echo $numbers[9]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[9] ?>" /></li>
                <li id="<?php echo $numbers[0]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[0] ?>" /></li>
               
                <li id="" class="delete lastitem">delete</li>
                <li id="" class="tab">tab</li>
       
                <li class="symbol"><span id="<?php echo $lower[16]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[16] ?>" /></span><span id="<?php echo $upper[16]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[16] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[22]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[22] ?>" /></span><span id="<?php echo $upper[22]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[22] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[4]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[4] ?>" /></span><span id="<?php echo $upper[4]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[4] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[17]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[17] ?>" /></span><span id="<?php echo $upper[17]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[17] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[19]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[19] ?>" /></span><span id="<?php echo $upper[19]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[19] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[24]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[24] ?>" /></span><span id="<?php echo $upper[24]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[24] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[20]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[20] ?>" /></span><span id="<?php echo $upper[20]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[20] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[8]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[8] ?>" /></span><span id="<?php echo $upper[8]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[8] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[14]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[14] ?>" /></span><span id="<?php echo $upper[14]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[14] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[15]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[15] ?>" /></span><span id="<?php echo $upper[15]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[15] ?>" /></span></li>
                <li class="capslock">bloq mayus</li>
                <li class="symbol"><span id="<?php echo $lower[0]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[0] ?>" /></span><span id="<?php echo $upper[0]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[0] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[18]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[18] ?>" /></span><span id="<?php echo $upper[18]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[18] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[3]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[3] ?>" /></span><span id="<?php echo $upper[3]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[3] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[5]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[5] ?>" /></span><span id="<?php echo $upper[5]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[5] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[6]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[6] ?>" /></span><span id="<?php echo $upper[6]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[6] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[7]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[7] ?>" /></span><span id="<?php echo $upper[7]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[7] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[9]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[9] ?>" /></span><span id="<?php echo $upper[9]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[9] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[10]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[10] ?>" /></span><span id="<?php echo $upper[10]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[10] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[11]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[11] ?>" /></span><span id="<?php echo $upper[11]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[11] ?>" /></span></li>
               
                <li class="left-shift">shift</li>
                <li class="symbol"><span id="<?php echo $lower[25]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[25] ?>" /></span><span id="<?php echo $upper[25]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[25] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[23]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[23] ?>" /></span><span id="<?php echo $upper[23]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[23] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[2]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[2] ?>" /></span><span id="<?php echo $upper[2]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[2] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[21]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[21] ?>" /></span><span id="<?php echo $upper[21]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[21] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[1]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[1] ?>" /></span><span id="<?php echo $upper[1]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[1] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[13]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[13] ?>" /></span><span id="<?php echo $upper[13]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[13] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[12]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[12] ?>" /></span><span id="<?php echo $upper[12]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[12] ?>" /></span></li>
                <li id="<?php echo $lower[0]; ?>" class="right-shift lastitem">shift</li>
               
        </ul>
        </p>
<?php
    break;
    case 'QWERTZ':
?>
        <ul id="keyboard">
                <li id="<?php echo $numbers[1]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[1] ?>" /></li>
                <li id="<?php echo $numbers[2]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[2] ?>" /></li>
                <li id="<?php echo $numbers[3]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[3] ?>" /></li>
                <li id="<?php echo $numbers[4]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[4] ?>" /></li>
                <li id="<?php echo $numbers[5]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[5] ?>" /></li>
                <li id="<?php echo $numbers[6]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[6] ?>" /></li>
                <li id="<?php echo $numbers[7]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[7] ?>" /></li>
                <li id="<?php echo $numbers[8]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[8] ?>" /></li>
                <li id="<?php echo $numbers[9]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[9] ?>" /></li>
                <li id="<?php echo $numbers[0]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[0] ?>" /></li>
               
                <li id="" class="delete lastitem">delete</li>
                <li id="" class="tab">tab</li>
       
                <li class="symbol"><span id="<?php echo $lower[16]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[16] ?>" /></span><span id="<?php echo $upper[16]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[16] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[22]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[22] ?>" /></span><span id="<?php echo $upper[22]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[22] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[4]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[4] ?>" /></span><span id="<?php echo $upper[4]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[4] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[17]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[17] ?>" /></span><span id="<?php echo $upper[17]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[17] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[19]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[19] ?>" /></span><span id="<?php echo $upper[19]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[19] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[25]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[25] ?>" /></span><span id="<?php echo $upper[25]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[25] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[20]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[20] ?>" /></span><span id="<?php echo $upper[20]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[20] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[8]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[8] ?>" /></span><span id="<?php echo $upper[8]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[8] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[14]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[14] ?>" /></span><span id="<?php echo $upper[14]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[14] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[15]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[15] ?>" /></span><span id="<?php echo $upper[15]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[15] ?>" /></span></li>
                <li class="capslock">bloq mayus</li>
                <li class="symbol"><span id="<?php echo $lower[0]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[0] ?>" /></span><span id="<?php echo $upper[0]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[0] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[18]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[18] ?>" /></span><span id="<?php echo $upper[18]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[18] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[3]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[3] ?>" /></span><span id="<?php echo $upper[3]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[3] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[5]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[5] ?>" /></span><span id="<?php echo $upper[5]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[5] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[6]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[6] ?>" /></span><span id="<?php echo $upper[6]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[6] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[7]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[7] ?>" /></span><span id="<?php echo $upper[7]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[7] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[9]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[9] ?>" /></span><span id="<?php echo $upper[9]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[9] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[10]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[10] ?>" /></span><span id="<?php echo $upper[10]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[10] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[11]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[11] ?>" /></span><span id="<?php echo $upper[11]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[11] ?>" /></span></li>
               
                <li class="left-shift">shift</li>
                <li class="symbol"><span id="<?php echo $lower[24]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[24] ?>" /></span><span id="<?php echo $upper[24]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[24] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[23]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[23] ?>" /></span><span id="<?php echo $upper[23]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[23] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[2]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[2] ?>" /></span><span id="<?php echo $upper[2]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[2] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[21]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[21] ?>" /></span><span id="<?php echo $upper[21]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[21] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[1]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[1] ?>" /></span><span id="<?php echo $upper[1]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[1] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[13]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[13] ?>" /></span><span id="<?php echo $upper[13]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[13] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[12]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[12] ?>" /></span><span id="<?php echo $upper[12]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[12] ?>" /></span></li>
                <li id="<?php echo $lower[0]; ?>" class="right-shift lastitem">shift</li>
               
        </ul>

        <?php
    break;
    case 'AZERTY':
?>
        <ul id="keyboard">
                <li id="<?php echo $numbers[1]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[1] ?>" /></li>
                <li id="<?php echo $numbers[2]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[2] ?>" /></li>
                <li id="<?php echo $numbers[3]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[3] ?>" /></li>
                <li id="<?php echo $numbers[4]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[4] ?>" /></li>
                <li id="<?php echo $numbers[5]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[5] ?>" /></li>
                <li id="<?php echo $numbers[6]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[6] ?>" /></li>
                <li id="<?php echo $numbers[7]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[7] ?>" /></li>
                <li id="<?php echo $numbers[8]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[8] ?>" /></li>
                <li id="<?php echo $numbers[9]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[9] ?>" /></li>
                <li id="<?php echo $numbers[0]; ?>" class="none"><img src="Letra.class.php?letra=<?php echo $numbers[0] ?>" /></li>
               
                <li id="" class="delete lastitem">delete</li>
                <li id="" class="tab">tab</li>
       
                <li class="symbol"><span id="<?php echo $lower[0]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[0] ?>" /></span><span id="<?php echo $upper[0]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[0] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[25]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[25] ?>" /></span><span id="<?php echo $upper[25]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[25] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[4]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[4] ?>" /></span><span id="<?php echo $upper[4]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[4] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[17]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[17] ?>" /></span><span id="<?php echo $upper[17]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[17] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[19]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[19] ?>" /></span><span id="<?php echo $upper[19]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[19] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[24]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[24] ?>" /></span><span id="<?php echo $upper[24]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[24] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[20]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[20] ?>" /></span><span id="<?php echo $upper[20]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[20] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[8]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[8] ?>" /></span><span id="<?php echo $upper[8]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[8] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[14]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[14] ?>" /></span><span id="<?php echo $upper[14]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[14] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[15]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[15] ?>" /></span><span id="<?php echo $upper[15]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[15] ?>" /></span></li>
                <li class="capslock">bloq mayus</li>
                <li class="symbol"><span id="<?php echo $lower[16]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[16] ?>" /></span><span id="<?php echo $upper[16]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[16] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[18]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[18] ?>" /></span><span id="<?php echo $upper[18]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[18] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[3]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[3] ?>" /></span><span id="<?php echo $upper[3]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[3] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[5]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[5] ?>" /></span><span id="<?php echo $upper[5]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[5] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[6]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[6] ?>" /></span><span id="<?php echo $upper[6]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[6] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[7]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[7] ?>" /></span><span id="<?php echo $upper[7]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[7] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[9]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[9] ?>" /></span><span id="<?php echo $upper[9]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[9] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[10]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[10] ?>" /></span><span id="<?php echo $upper[10]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[10] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[11]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[11] ?>" /></span><span id="<?php echo $upper[11]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[11] ?>" /></span></li>
               
                <li class="left-shift">shift</li>
                <li class="symbol"><span id="<?php echo $lower[22]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[22] ?>" /></span><span id="<?php echo $upper[22]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[22] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[23]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[23] ?>" /></span><span id="<?php echo $upper[23]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[23] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[2]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[2] ?>" /></span><span id="<?php echo $upper[2]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[2] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[21]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[21] ?>" /></span><span id="<?php echo $upper[21]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[21] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[1]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[1] ?>" /></span><span id="<?php echo $upper[1]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[1] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[13]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[13] ?>" /></span><span id="<?php echo $upper[13]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[13] ?>" /></span></li>
                <li class="symbol"><span id="<?php echo $lower[12]; ?>" class="off"><img src="Letra.class.php?letra=<?php echo $lower[12] ?>" /></span><span id="<?php echo $upper[12]; ?>" class="on"><img src="Letra.class.php?letra=<?php echo $upper[12] ?>" /></span></li>
                <li id="<?php echo $lower[0]; ?>" class="right-shift lastitem">shift</li>
               
        </ul>

<?php
    break;
 }
?>
    <center>
    <p>
    <input type="submit" name="submit" value="Ingresar"/>
    </p>
    <p>
    <h3 class="error"><?php showMessage();?></h3>
    </p>
    </center>
</form>
</div>

</div></div>
<div id="footer">
	<p>
	&copy; 2006 <strong>UNFV-FIEI</strong> | 
	Valid <a href="http://jigsaw.w3.org/css-validator/check/referer"><strong>CSS</strong></a> | 
		   <a href="http://validator.w3.org/check/referer"><strong>XHTML</strong></a>
	</p>
	</div>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

